/* Global resets */
*{ margin:0px; padding:0px; }

h1, h2, h3 {
    margin: 0px;
}

/* General centering CSS */
.center {
  margin-left: auto;
  margin-right: auto;
}
.right {
  float: right;
}
.left {
   float: left;
}
.clear {
  clear: both;
}
.inline {
  display: inline;
}

/* Coloring */
.body_coloring {
    background-color: #EEE;
}
.header_coloring {
	background-color: #222;
}

.tundra .dijitTabPaneWrapper {
	background-color: #EEE;
}

/* Base Layout */
html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #393939;
    min-width: 600px;
}

.list {
	margin-left: 3em;
}

/** Container **/

#container {
    height: 100%;
    min-height: 600px; /*no scroll bar for some reason */
    width: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
}

/** Header **/
#header {
    background-color: #222;
    background-repeat: no-repeat;
}

/** Top **/

#top {
    float: left;
    padding-top: 15px;
    padding-left: 20px;
    font-size: x-large;
    font-weight:bold;
    color: #CCC;
}

#power_div {
    padding: 7px;
}

.power_icon{
	background-image: url('/s/images/grey_power_button_small.png');
    background-repeat: no-repeat;
    background-size: 45px 45px;
    width: 45px;
    height: 45px;   
    text-align: center;
    border: 1px solid #222;
}

.power_icon:hover{
    border: 1px solid #CCC;
}

.power_icon.disabled{
    background-image: url('/s/images/grey_power_button_small.png');
}

.power_icon.on{
    background-image: url('/s/images/green_power_button_small.png');
}

.power_icon.off{
    background-image: url('/s/images/red_power_button_small.png');
}

/* center */

/* Status section */
.status {
	padding-top: 15px;
	padding-left: 2%;
	width: 47%;
	float: left;
	min-width: 400px;
}

.img_box {
	padding: 10px;
	float: left;
	margin-right: 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.header {
	background-color: #d5d5d5;
	border: 1px solid #E4E4E4;
	padding: 0.2em 0.8em;
    -webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	color: black;
	font-size: large;
	text-align:center;
    margin-left: auto;
    margin-right: auto;
}

.parameter {
	float: left;
	min-width: 250px;
	width: auto !important;
	width: 250px;
}
.parameter.error {
	background-color: red;
	color: black;
}
.parameter.success div.value {
    color: #474;
}

.key {
	text-align: right;
	min-width: 80px;
	padding-right: 10px;
    float: left;
    font-weight: bold;
}
.value {
	min-width: 160px;
    float: left;
}

.value input {
	width: 100%;
}


/*console*/
#console-output{
	position: absolute;
	top: 0px;
	bottom: 2em;
	left: 0px;
	right: 0px;
	overflow:auto;
	padding: 5px;
	word-break: break-all;
}

#console-output span.input-color{
	color: #A44;
}

#console-output span.output-color{
    color: #494;
}

#console-input-label{
    position: absolute;
    height: 1.3em;
    bottom: 1px;
    left: 0px;
    padding-left: 5px;
    padding-bottom: 5px;
    width: 50px;
    background-color: #EEE;
}

#console-input-wrapper{
    position: absolute;
    bottom: 1px;
    left: 55px;
    right: 5px;
}

#console-input{
    width: 100%;
    height: 100%;
}

/* logs */
#logs_pane {
	height: 450px;
}

#logs {
    width: 100%;
    min-width: 400px;
    height: 100%;
}

#logsGrid {
    position:absolute;
    top:35px;
    bottom:0px;
    left:0px;
    right: 0px;
}
   
#grid {
    width: 100%;
    min-height: 50px;
    height: 100%;
}

/** Footer **/
#footer {
    background-color: #222;
    height: 1.5em;
    text-align: center;
    color: #70899D;
    padding: .5em;
}

#footer a, #footer a.visited {
    color: #70899D;
}
